<template>
  <div class="login">
    <van-nav-bar title="登录" class="page-nav-bar" />
    <van-form ref="loginForm" @submit="login" :show-error="false">
      <van-field
        placeholder="请输入手机号码"
        v-model="user.mobile"
        name="mobile"
        :rules="formRules.mobile"
      >
        <template #left-icon>
          <i class="toutiao toutiao-shouji"></i>
        </template>
      </van-field>
      <van-field
        placeholder="请输入验证码"
        v-model="user.code"
        :rules="formRules.code"
      >
        <i class="toutiao toutiao-yanzhengma" slot="left-icon" />
        <template #button>
          <van-count-down
            v-if="!timeShow"
            :time="time"
            ref="time"
            format="ss秒后重新发送验证码"
            @finish="finish"
            @change="change"
          />
          <van-button
            native-type="button"
            v-else
            round
            class="send-sms-btn"
            type="default"
            @click="getCode"
            >获取验证码</van-button
          >
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button
          block
          type="info"
          class="login-btn"
          native-type="submit"
          :loading="loading"
        >
          登录
        </van-button>
      </div>
    </van-form>
    <p class="privacy">隐私条款</p>
  </div>
</template>

<!-- 需求：
1、手机号不能为空和手机号格式不正确只能显示一个 -->
<script>
import { requestCode } from "@/api";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      time: 4000,
      timeShow: true,
      // 提交属性
      user: {
        mobile: "",
        code: "",
      },
      // 表单校验规则
      formRules: {
        mobile: [
          { required: true, message: "手机号不能为空" },
          { pattern: /^1\d{10}$/, message: "手机号不正确" },
        ],
        code: [
          { required: true, message: "验证码不能为空" },
          { pattern: /^\d{4,6}$/, message: "验证码不正确" },
        ],
      },
      loading: false, //登录记载状态
    };
  },
  methods: {
    ...mapActions(["setToken", "getUserInfo", "getUserFocus", "getUserFans"]),
    async login() {
      try {
        this.loading = true;
        // 发送登录请求--获取token
        await this.setToken(this.user);
        //获取用户信息
        await this.getUserInfo();
        //获取用户关注信息
        await this.getUserFocus();
        //  获取用户粉丝信息
        await this.getUserFans();
        // 路由跳转

        this.$router.push("/");
      } finally {
        this.loading = false;
      }
    },
    // 点击验证码---节流--一段时间内只允许一定次数的代码
    async getCode() {
      this.timeShow = false;
      await this.$refs.loginForm.validate("mobile");
      // try里面代码报错就会终止代码运行
      // 请求验证码
      await requestCode(this.user.mobile);
      //开启倒计时
      this.timeShow = false;
      // 提示：短信验证码发送成功
      this.$toast.success("验证码发送成功");
    },
    // 倒计时结束
    finish() {
      this.timeShow = true;
    },
    // 监听倒计时
    change() {
      const res = this.$refs.time;
      // console.log(this.$refs.mobile._props.placeholder)
      if (res.remain < 1000) {
        this.timeShow = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login-btn-wrap {
  padding: 53px 28px 0px;
  .login-btn {
    background-color: #6db4fb;
    border-radius: 10px;
    border: none;
    .van-button__text {
      font-size: 30px;
      color: #fff;
    }
  }
}
.toutiao {
  font-size: 37px;
}
.send-sms-btn {
  height: 46px;
  line-height: 46px;
  background-color: #ededed;
  font-size: 22px;
  color: #666;
}
.van-count-down {
  text-align: center;
}
.privacy {
  letter-spacing: 1px;
  position: absolute;
  bottom: 54px;
  left: 324px;
  font-size: 25px;
  color: #666;
}
input.van-field__control::-webkit-input-placeholder {
  color: #4d6ff0;
}
</style>
